<template>
  <div>
    <div class="filter-bar-query-top">
      <el-row type="flex">
        <el-col :span="1">告警名称</el-col>
        <el-col :span="8">
            <el-input v-model="alarmName" placeholder="请输入告警名称"  :maxlength="50"  size="small"></el-input> 
        </el-col>
        <el-col :span="6" :offset="9">
          <el-input class="search-box" placeholder="搜索" icon="search" size="small" @keyup.enter.native="systemSearch" v-model="search" @click="systemSearch">
          </el-input>
          <!--<el-input size="small" v-model="search" @keyup.enter.native="systemSearch" placeholder="请输入"></el-input>-->
        </el-col>
        <!--<el-col :span="1" style="text-align: center">
          <el-button size="small" type="primary" >搜索</el-button>
        </el-col>-->
      </el-row>
      <el-row type="flex">
        <el-col :span="1">告警描述</el-col>
       <el-col :span="8">
           <el-input v-model="alarmDetail" placeholder="请输入告警描述" type="textarea" :rows="2" :maxlength="50"  size="small"></el-input> 
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="1">告警类型</el-col>
        <el-col :span="8">
          <el-select v-model="alarmType" placeholder="请选择告警类型" style="width: 100%">
            <el-option
              v-for="item in alarmTypeData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>  
    <div style="padding:10px 15px;">
      <div class="custom-table">
        <p class="custom-table-event">应用</p>
        <p class="custom-table-strategy">集群</p>
        <p class="custom-table-active">实例</p>
      </div>
      <!-- <el-table :data="systemData" :show-header="false">
        <el-table-column prop="tree" label="告警对象">
          <template scope="scope">
            <el-tree
              :data="scope.row.treeData"
              accordion
              node-key="id"
              :highlight-current="scope.row.current"
              @node-click="sysTreeClick"
              @node-expand="sysTreeExpand"
              @node-collapse="sysTreeCollapse"
              @current-change="getTreeIndex(scope.$index)"
              :indent="30"
              :render-content="renderContent"
              default-expand-all
              :current-node-key="1"
              >
            </el-tree>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="strategy" label="策略">
          <template scope="scope">
            <div class="sys-list" v-for="(item,index) in scope.row.treeData" :key="index">
              <div :class="{'space-36': item.systemStrategyOutput.length === 0 && item.showChildren}">
                <el-tag type="primary" class="strategy-tag" v-for="(k, i) in item.systemStrategyOutput" :key="i" @click.native="showStrategyMore(k)">{{k.strategyName}}</el-tag>
              </div>
              <div v-for="(k, i) in item.children" v-if="item.showChildren" :key="i" class="children">
                <div :class="{'space-36': k.systemStrategyOutput.length === 0 && item.showChildren}">
                  <el-tag type="primary" class="strategy-tag" v-for="(o, j) in k.systemStrategyOutput" :key="j" @click.native="showStrategyMore(o)">{{o.strategyName}}</el-tag>
                </div>
                <div v-for="(m, n) in k.children" v-if="k.showChildren" :key="n">
                  <div :class="{'space-36': m.systemStrategyOutput.length === 0 && k.showChildren}">
                    <el-tag type="primary" class="strategy-tag" v-for="(o, j) in m.systemStrategyOutput" :key="j" @click.native="showStrategyMore(o)">{{o.strategyName}}</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="action" label="操作" width="100">
          <template scope="scope">
            <div>
                <el-button type="text" @click="showStrategyList(scope.$index)">添加</el-button>
            </div>
          </template>
        </el-table-column> -->
      <!-- </el-table> -->
      <div class="maxti-container">
        <div class="application">
          <ul>
            <li :class='{"application-active": applicationActive === i}' @click="choiceApp(v.treeData[0], i)" v-for="(v, i) in systemData">{{v.treeData[0].label}}</li>
          </ul>
        </div>
        <div class="tier" :class='{"tier-nonce": tierTreeData.length == 0}'>
          <ul>
            <li :class='{"tier-active": tierActive === i}' @click="choiceTier(v, i)" v-for="(v, i) in tierTreeData">{{v.label}}</li>
          </ul>
          <p v-show="tierTreeData.length == 0">{{tierNonce}}</p>
        </div>
        <div class="instance" :class='{"instance-nonce": instanceTreeData.length == 0}'>
          <ul>
            <li :class='{"instance-active": instanceActive === i}' @click="choiceInstance(v, i)" v-for="(v, i) in instanceTreeData">{{v.label}}</li>
          </ul>
          <p v-show="instanceTreeData.length == 0">{{instanceNonce}}</p>
        </div>
      </div>
      <div class="app-text">
        {{appName ? '应用：' + appName : ''}}{{tierName ? ' / 集群：' + tierName : ''}}{{instanceName ? ' / 实例：' + instanceName : ''}}
      </div>
      <el-table :data="treeStrategyLimit">
        <el-table-column prop="alarmName" label="告警名称"></el-table-column>
        <el-table-column prop="alarmStatus" label="告警状态"></el-table-column>
        <el-table-column prop="alarmActive" label="操作">
          <template scope="scope">
            <el-button type="text" @click="showStrategyMore(scope.row)">详情</el-button>
            <el-button type="text" style="color: #ff4949;" @click="delSysStrategy(scope.row.alarmCode, scope.row.alarmName, scope.$index, treeStrategyData, treeStrategyData.index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="4" style="margin-top: 10px;">
          <!--<el-button size="small" @click="prev">上一步</el-button>-->
          <el-button size="small" type="primary" :disabled="sysInstance" @click="next" :loading="createalarmloding">{{createalarmloding ? '' : '下一步' }}</el-button>
          <el-button size="small" @click="routerBack">取消</el-button>
        </el-col>
        <el-col v-if="treeStrategyData.systemStrategyOutput && treeStrategyData.systemStrategyOutput.length > 0" :span="20" class="sys-pagination">
          <el-pagination
            class="pagination"
            @current-change="sysCurrentChange"
            :current-page.sync="sysPage"
            :page-size="5"
            layout="total, prev, pager, next"
            :total="treeStrategyData.systemStrategyOutput && treeStrategyData.systemStrategyOutput.length">
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="可用策略" :visible.sync="sysStrategyDialog" size="large">
          <el-row>
            <el-col :span="6" :offset="18" style="margin-bottom: 10px;text-align:right;">
              <el-button type="primary" size="small" @click="showSysNewStrategyDialog" class="el-icon-plus"> 新建策略</el-button>
            </el-col>
          </el-row>
          <el-table
            ref="multipleTable"
            :data="strategyListData.data"
            tooltip-effect="dark"
            @selection-change="monitorStrategyChange">
            <el-table-column
              :label="tips">
              <el-table-column type="selection" width="55" v-if="strategyListData.data && strategyListData.data.length"></el-table-column>
              <!--<el-table-column prop="strategyCode" label="编号"></el-table-column>
              <el-table-column prop="type" label="实例">
                <template scope="scope">
                  {{scope.row.type === 0 ? '系统' : '探针'}}
                </template>
              </el-table-column>-->
              <el-table-column prop="strategyName" label="策略名称"></el-table-column>
              <el-table-column prop="level" label="告警级别"></el-table-column>
              <el-table-column prop="strategyDesc" label="策略描述"></el-table-column>
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="14" :offset="10" class="sys-pagination">
              <el-pagination v-if="strategyListData.total > 5"
                class="pagination"
                @current-change="recordCurrentChange"
                :current-page.sync="recordPage"
                :page-size="5"
                layout="total, prev, pager, next"
                :total="strategyListData.total">
              </el-pagination>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="sysStrategyDialog = false">取 消</el-button>
            <el-button type="primary" size="small" @click="rependStrategy">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="sysNewStrategyDialog" :close-on-click-modal="false" :before-close="beforeStrategyDialogClose" :close-on-press-escape="false" size="large">
            <router-view @dialogChange="dialogChange" :changeId="changeId"></router-view>
        </el-dialog>
        <el-dialog title="删除告警" :visible.sync="sysDelStrategyDialog">
            {{'告警名称：' + deleStrategyInfo}}
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="sysDelStrategyDialog = false">取 消</el-button>
            <el-button type="primary" size="small" :loading="delDisabled" @click="delStrategy">{{ delDisabled ? '' : '确 定' }}</el-button>
          </div>
        </el-dialog>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import { Table, TableColumn, Row, Col, Button, Input, Message, Tree, Checkbox, CheckboxGroup, Dialog, Pagination, Tag, Select, Option } from 'element-ui'
  export default {
    data () {
      return {
        createalarmloding: false,
        alarmDetail: '',
        alarmName: '',
        recordPage: 1,
        search: '',
        monitorStrategyData: [],
        systemData: [],
        strategyListData: [],
        type: '',
        code: '',
        sysStrategyDialog: false,
        treeIndex: '',
        isIndeterminate: false,
        strategyCheckAll: '',
        strategy: [],
        strategyCodes: [],
        strategyData: [
          {
            name: '222',
            id: 222
          },
          {
            name: '333'
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        sysListData: [],
        sysPage: 1,
        systemLevelName: '',
        systemGroupName: '',
        systemAgentName: '',
        tips: '',
        sysNewStrategyDialog: false,
        total: 0,
        sysDelStrategyDialog: false,
        strategyCode: '',
        deleStrategyInfo: '',
        index: 0,
        localCodeData: [],
        step: 0,
        sysInstance: true,
        systemName: '',
        notIncludeData: [],
        notInclude: '',
        defaultExpandAll: false,
        changeId: false,
        delDisabled: false,
        flag: false,
        tagStrategy: '',
        applicationActive: '',
        tierTreeData: [],
        instanceTreeData: [],
        tierActive: '',
        instanceActive: '',
        tierNonce: '请选择应用',
        instanceNonce: '请选择集群',
        treeStrategyData: [],
        limitStart: 0,
        limitEnd: 5,
        appName: '',
        tierName: '',
        instanceName: '',
        alarmType: '',
        alarmTypeData: [
          {
            value: 'APM',
            label: 'APM'
          }
        ]
      }
    },
    watch: {
      search (v) {
        !v && this._sysAgentList()
      },
      systemData: {
        deep: true,
        handler (v) {
          this.flag = false
          var flag = false
          v.some((k, i) => {
            if (k.showDialog) {
              flag = true
            }
          })
          this.flag = flag
          if (flag && this.alarmName) {
            this.sysInstance = false
          } else {
            this.sysInstance = true
          }
        }
      },
      alarmName (v) {
        if (v && this.code) {
          this.sysInstance = false
        } else {
          this.sysInstance = true
        }
      },
      code (v) {
        if (v && this.alarmName) {
          this.sysInstance = false
        } else {
          this.sysInstance = true
        }
      }
    },
    created () {
      this.$emit('changeStep', 1)
      if (sessionStorage.getItem('curSystemName') === '全部') {
        // this.defaultExpandAll = false
      } else {
        // this.defaultExpandAll = true
      }
      this.$root.eventBus.$on('system-or-time-change', v => {
        // if (v.curSystem.name !== '全部') {
        //   // this.defaultExpandAll = true
        // } else {
        //   this.defaultExpandAll = false
        // }
        this._sysAgentList()
      })
      this._sysAgentList()
    },
    computed: {
      treeStrategyLimit () {
        if (this.treeStrategyData.systemStrategyOutput) {
          return this.treeStrategyData.systemStrategyOutput.slice(this.limitStart, this.limitEnd)
        }
      }
    },
    methods: {
      choiceInstance (v, i) {
        if (this.instanceActive === i) {
          return
        }
        console.log(v)
        this.treeStrategyData = v
        this.instanceActive = i
        this.notIncludeData = v.systemStrategyOutput
        this.type = v.level
        this.instanceName = v.label
        this.code = v.id
      },
      choiceTier (v, i) {
        if (this.tierActive === i) {
          return
        }
        if (v.children.length > 0) {
          this.instanceTreeData = v.children
        } else {
          this.instanceNonce = '该集群没有实例'
        }
        this.type = v.level
        this.code = v.id
        this.tierName = v.label
        this.instanceName = ''
        this.treeStrategyData = v
        this.tierActive = i
        this.instanceActive = ''
        this.notIncludeData = v.systemStrategyOutput
        console.log(v)
      },
      choiceApp (v, i) {
        if (this.applicationActive === i) {
          return
        }
        this.type = v.level
        this.code = v.id
        if (v.children.length > 0) {
          this.tierTreeData = v.children
        } else {
          this.tierNonce = '该应用没有集群'
        }
        this.appName = v.label
        this.tierName = ''
        this.instanceName = ''
        this.notIncludeData = v.systemStrategyOutput
        this.instanceTreeData = []
        this.applicationActive = i
        this.treeStrategyData = v
        this.tierActive = ''
        console.log(v, i)
      },
      renderContent (h, { node, data, store }) {
        return (
          <span>
            <span style="display: inline-block;width: 300px;">
              <span>{data.label}</span>
            </span>
            <span>
            {data.systemStrategyOutput.map((v, j) => {
                return <span class="el-tag strategy-tag el-tag--primary" on-click={(e) => {e.stopPropagation();this.showStrategyMore(v, data, j)}}>
                      {v.alarmName}
                      <i class="el-tag__close el-icon-close" on-click={(e) => {e.stopPropagation(); this.delSysStrategy(v.alarmCode, v.alarmName, j, data, data.index)}}></i>
                  </span>
            })}
            </span>
          </span>
        )
      },
      showStrategyMore (obj, v, s) {
        console.log(obj, v, s)
        this.tagStrategy = obj
        this.sysNewStrategyDialog = true
        this.changeId = !this.changeId
        this.$router.push('/alarm-create/instance/' + obj.alarmCode)
      },
      sysTreeExpand (v, p, n) {
        v.showChildren = true
        this.systemData[this.treeIndex].current = true
        this.systemData[this.treeIndex].showDialog = true
        this.systemName = v.label
      },
      sysTreeCollapse (v, p, n) {
        v.showChildren = false
        // console.log(v)
        if (v.level === 1) {
          this.systemName = v.label
          this.systemData[this.treeIndex].showDialog = false
          this.systemData[this.treeIndex].current = false
        }
      },
      sysTreeClick (v, p, n) {
        if (!v.children) {
          this.systemName = v.label
          this.systemData[this.treeIndex].showDialog = true
          this.systemData[this.treeIndex].current = true
        }
        this.notIncludeData = v.systemStrategyOutput
        this.systemData[this.treeIndex].tableData = v.systemStrategyOutput
        this.systemLevelName = ''
        this.systemGroupName = ''
        this.systemAgentName = ''
        this.tips = ''
        if (v.level == 1) {
          this.systemLevelName = p.data.label
          this.tips = this.systemLevelName
        }
        if (v.level == 2) {
          this.systemGroupName = p.data.label
          this.systemLevelName = p.parent.data.label
          this.tips =  this.systemLevelName + ' / ' + this.systemGroupName
        }
        if (v.level == 3) {
          this.systemAgentName = p.data.label
          this.systemGroupName = p.parent.data.label
          this.systemLevelName = p.parent.parent.data.label
          this.tips = this.systemLevelName + ' / ' + this.systemGroupName  + ' / ' + this.systemAgentName
        }
        if (v.id) {
          this.code = v.id
          // this.systemData[this.treeIndex].showDialog = true
          // var data = await this.api.sysStrategyGetById({
          //   url: '/alarmmanage/sysStrategy/get/' + this.code
          // })
        }
        this.type = v.level
        // sessionStorage.setItem('systemCode', this.code)
      },
      getTreeIndex (index) {
        this.treeIndex = index
        // console.log(this.treeIndex)
      },
      next () {
        this.createalarmloding = true
        this.$emit('changeStep', 2)
        this.notInclude = ''
        if (this.notIncludeData.length > 0) {
          this.notIncludeData.some((v, i) => {
            this.notInclude += ',' + v.strategyCode
          })
        }
        let target = '应用：' + this.appName + (this.tierName ? ' / 集群：' + this.tierName : '') +  (this.instanceName ? ' / 实例：' + this.instanceName : '')
        sessionStorage.setItem('sysTips', this.tips)
        sessionStorage.setItem('sysLevel', this.type)
        sessionStorage.setItem('notInclude', this.notInclude.substring(1))
        sessionStorage.setItem('alarmName', this.alarmName)
        sessionStorage.setItem('alarmDesc', this.alarmDetail)
        sessionStorage.setItem('systemCode', this.code)
        sessionStorage.setItem('target', target)
        this.$router.push('/alarm-create/create')
        // this.$router.push('/strategy/create')
        
      },
      routerBack (){
        this.$router.push('/alarm/')
      },
      monitorStrategyChange (v) {
        var codes = []
        this.localCodeData = []
        v.some((v, i) => {
          this.localCodeData.push({
            strategyCode: v.strategyCode,
            strategyName: v.strategyName
          })
          codes.push(v.strategyCode)
        })
        this.strategyCodes = codes
      },
      systemSearch () {
        if (!this.search) {
          return
        }
        this.instanceName = ''
        this.appName = ''
        this.tierName = ''
        this.applicationActive = ''
        this.instanceTreeData = []
        this.tierTreeData = []
        this.treeStrategyData = []
        this._sysAgentList()
      },
      recordCurrentChange (v) {
        this.recordPage = v
        this._initStrategyList()
      },
      sysCurrentChange (v) {
        this.sysPage = v
        this.limitStart = (v - 1) * 5
        this.limitEnd = v * 5
      },
      async rependStrategy () {
        if (!this.strategyCodes.length) {
          Message('请选择要添加的策略')
          return
        }
        var data = {
          code: this.code,
          strategyCodes: this.strategyCodes,
          type: this.type
        }
        this.sysStrategyDialog = false
        await this.api.sysStrategySave({data: data})
        this.localCodeData.some((v, i) => {
          this.systemData[this.treeIndex].tableData.push({
            strategyCode: v.strategyCode,
            strategyName: v.strategyName
          })
        })
        // this._sysAgentList()
      },
      showStrategyList (index) {
        if (!this.systemData[index].showDialog) {
          Message('请选择具体系统或具体业务或具体实例')
          return
        }
        // this.monitorStrategyData = data.data
        // this._initStrategyList()
        this.sysStrategyDialog = true
      },
      beforeStrategyDialogClose (close) {
        // this.sysStrategyDialog = true
        // this._initStrategyList()
        close()
      },
      dialogChange (v) {
        if (v) {
          this.tagStrategy.alarmName = v
        }
        // this.sysStrategyDialog = true
        this.sysNewStrategyDialog = false
        // this._initStrategyList()
      },
      showSysNewStrategyDialog () {
        this.sysStrategyDialog = false
        this.sysNewStrategyDialog = true
        this.$router.push('/alarm-create/instance/instance-strategy')
      },
      delSysStrategy (id, info, i, row, s) {
        console.log(id, info, i, row, s)
        this.step = s
        this.index = i
        this.type = row.level
        this.deleStrategyInfo = info
        this.strategyCode = id
        this.code = row.id
        this.pindex = row.pindex
        this.sysDelStrategyDialog = true
        if (row.level == 3) {
          this.treeIndex = row.ppindex
        } else if (row.level == 2) {
          this.treeIndex = row.pindex
        } else if (row.level == 1) {
          this.treeIndex = row.index
        }
      },
      async delStrategy () {
        this.delDisabled = true
        var data = {
          alarmCode: this.strategyCode
        }
        data.code = this.code
        data.type = this.type
        await this.api.delAlarmByCode({data: data})
        this.sysDelStrategyDialog = false
        if (this.type === 1) {
          this.systemData[this.treeIndex].treeData[0].systemStrategyOutput.splice(this.index, 1)
        }
        if (this.type === 2) {
          this.systemData[this.treeIndex].treeData[0].children[this.step].systemStrategyOutput.splice(this.index, 1)
        }
        if (this.type === 3) {
          this.systemData[this.treeIndex].treeData[0].children[this.pindex].children[this.step].systemStrategyOutput.splice(this.index, 1)
        }
        this.delDisabled = false
        // this._sysAgentList()
      },
      async _initStrategyList () {
        var data = {
          size: 5,
          page: this.recordPage
        }
        this.strategyListData = await this.api.searchStrategyName({data: data})
      },
      async _sysAgentList () {
        var sysname = false
        var data = {
          page: +(this.sysPage),
          size: 1000
        }
        if (this.search || sessionStorage.getItem('curSystemName')) {
          if (sessionStorage.getItem('curSystemName') == '全部') {
            data.name = this.search
          } else {
            data.name = this.search || sessionStorage.getItem('curSystemName')
            sysname = true
          }
        }
        data = await this.api.sysAgentList({data: data})
        this.systemData = []
        if (data.data && data.data.length > 0) {
          this.total = data.total
          data.data.some((v, i) => {
            var sys = []
            var group = []
              if (v.groupOutput.length > 0) {
                v.groupOutput.some((k, j) => {
                  var agent = []
                  if (k.agentOutput && k.agentOutput.length > 0) {
                    k.agentOutput.some((u, y) => {
                      agent.push({
                        label: u.agentName,
                        id: u.agentCode,
                        level: 3,
                        index: y,
                        pindex: j,
                        ppindex: i,
                        systemStrategyOutput: u.systemStrategyOutput
                      })
                    })
                    group.push({
                      label: k.groupName,
                      id: k.groupCode,
                      level: 2,
                      index: j,
                      pindex: i,
                      children: agent,
                      showChildren: sysname,
                      systemStrategyOutput: k.systemStrategyOutput
                    })
                  } else {
                    group.push({
                      label: k.groupName,
                      id: k.groupCode,
                      index: j,
                      level: 2,
                      pindex: i,
                      systemStrategyOutput: k.systemStrategyOutput
                    })
                  }
                })
                sys.push({
                  label: v.systemName,
                  index: i,
                  level: 1,
                  id: v.systemCode,
                  showChildren: sysname,
                  systemStrategyOutput: v.systemStrategyOutput,
                  children: group
                })
              } else {
                sys.push({
                  label: v.systemName,
                  index: i,
                  level: 1,
                  id: v.systemCode,
                  systemStrategyOutput: v.systemStrategyOutput
                })
              }
              this.systemData.push({
                treeData: sys,
                showDialog: false,
                current: false
              })
          })
        }
      }
    },
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-row': Row,
      'el-col': Col,
      'el-button': Button,
      'el-input': Input,
      'el-tree': Tree,
      'el-checkbox-group': CheckboxGroup,
      'el-checkbox': Checkbox,
      'el-dialog': Dialog,
      'el-pagination': Pagination,
      'el-tag': Tag,
      'el-select': Select,
      'el-option': Option
    }
  }
</script>
<style lang="scss">
  .system-search {
    padding-bottom: 5px;
  }
  .system-tree, .el-tree {
    padding: 10px 0;
    border: none!important;
    background: transparent!important;
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: rgb(228, 232, 241)!important;
  }
  .list-edit {
    color: #50bfff;
    margin-right: 8px;
    cursor: pointer;
  }
  .list-del {
    color: #ff4949;
    cursor: pointer;
  }
  .pagination {
    text-align: right;
    padding-right: 0!important;
  }
  .sys-pagination {
    margin-top: 10px;
  }
  .sys-list {
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    position: relative;
  }
  .filter-bar-query-top {
    border-top: 1px solid #e5e5e5;
    padding: 0 15px;
    line-height: 50px;
   
  }
  .space-36 {
    height: 36px;
    padding: 1px 0;
  }
  .children {
    padding: 5px 0;
  }
  .strategy-tag {
    margin-top: 5px;
    margin-right: 5px;
  }
  .custom-table {
    background: rgb(238, 241, 246);
    color: rgb(31, 45, 61);
    height: 40px;
    line-height: 40px;
    padding: 0!important;
    font-weight: bold;
    border-top:1px solid rgb(223, 230, 236);
    border-left:1px solid rgb(223, 230, 236);
    border-right:1px solid rgb(223, 230, 236);
    position: relative;
    p {
      float: left;
      width: 33.33%!important;
      padding: 0!important;
      text-indent: 1.5em;
    }
    // .custom-table-event {
    //   width: 325px;
    // }
    // .custom-table-active {
    //   width: 64px;
    //   padding: 0 18px;
    //   position: absolute;
    //   right: 0;
    // }
  }
  .maxti-container {
    display: flex;
    border-left: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    div {
      width: 33.33%;
      padding: 15px 0;
      height: 160px;
      overflow: scroll;
      ul {
        padding:0 18px;
      }
      li {
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        text-indent: 1.5em;
        &:hover {
          background: rgb(228, 232, 241);
        }
      }
      .application-active, .tier-active, .instance-active {
        background: rgb(228, 232, 241);
      }
    }
    .tier {
      border-left: 1px solid #dfe6ec;
      border-right: 1px solid #dfe6ec;
    }
    .tier-nonce, .instance-nonce {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .app-text {
    padding: 15px 0;
    font-weight: bold;
    font-size: 14px;
  }
</style>
